import React, {Component} from 'react';
import {View, Text, StatusBar, Image, ImageBackground,TouchableOpacity,ScrollView} from 'react-native'
import SafeAreaViewPlus from '../../common/SafeAreaViewPlus';
import styles from './styles';
import Swiper from 'react-native-swiper';
import Ionicons from 'react-native-vector-icons/Ionicons';
import AntDesign from 'react-native-vector-icons/AntDesign'
import {Tabs} from '@ant-design/react-native';
import GlobalStyles from '../../common/styles/GlobalStyles';
import NavigationUtil from '../../navigators/NavigationUtil';
import StorageUtil from "../../utils/StorageUtil";
import {Constant} from "../../common/Constant";
import ToastUtil from "../../utils/ToastUtil";
import {BASE_URL} from "../../common/BASE_URL";
import HttpUtils from "../../expand/dao/HttpUtils";
import DateUtil from "../../utils/DateUtil"
import Dict from '../../common/Dict';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            info: {},
            caseList:[],
            noticeList: [],
            ruleList: [],
        }
    }
    componentDidMount() {
        // StatusBar.setBackgroundColor('transparent');
        this.initUserInfo()
        this.loadData()
        Dict.getAllDict(); // 请求所有字典并存到本地
    }
    gotoPage(page){
        NavigationUtil.goPage(page);
    }
    async initUserInfo(){
        const user = await StorageUtil.get(Constant.userInfo);
        this.setState({
            info: user || {}
        })
    }
    loadData(){
        const index = this.state.tabIndex
        if(index === 2){
            this._loadRuleList()
        }
    }
    // 规则制度
    _loadRuleList(){
        HttpUtils.request({
            url: BASE_URL.apiBaseUrl + '/app/regime',
            params: {
                page: 0, size:4
            }
        }).then((res) => {
            console.log(res)
            if(!res.status){
                const {content} = res
                this.setState({
                    ruleList: content
                })
            }
                // if (res && res.code === 0) {
                //     const {records, pages} = res.data;
                //     // 如果当前查询的是第一页，但是没有查出数据，给出提示，并修改底部文字
                //     if (current == 1 && records.length === 0) {
                //         data.hideLoadingMore = true;
                //     }
                //     this.setState(data);
                // } else {
                //     const msg = res.msg ? res.msg : '网络异常，请稍后再试';
                //     ToastUtil.info(msg);
                // }
            })
            .catch((e) => {
                console.log(e)
                ToastUtil.info('网络异常,请稍后再试');
            });
    }

    _renderUserInfo(){
        const {info} = this.state
        return (
            <View style={[styles.userInfoPanel,styles.blockPanel]}>
                <View style={styles.locationPanel}>
                    <Ionicons name={'location'} size={20} color={'#fff'} />
                    <Text style={styles.locationLabel}>当前位置：</Text>
                    <Text style={styles.locationValue}>四川省成都市天府广场</Text>
                </View>
                <View style={styles.msgPanel}>
                    <ImageBackground style={styles.msgBgImage} source={require('../../assets/home/msg_bg.png')} >
                        <View style={{flex: 1,display: 'flex',flexDirection: 'row'}}>
                            <View>
                                <Image source={require('../../assets/home/userDefault.png')} style={styles.userImage} />
                            </View>
                            <View style={{paddingLeft: 10,justifyContent:'center'}}>
                                <View style={{display: 'flex',flexDirection: 'row',alignItems: 'center',marginBottom: 5}}>
                                    <Text style={{color: '#4D4D4D',fontSize: 16}}>{info.nickName}</Text>
                                    <Text style={{color: '#7E7E7E',fontSize: 12,paddingLeft: 5}}>{info.dept && info.dept.name}</Text>
                                </View>
                                {info.aqcNum?
                                <ImageBackground style={styles.noBgImage} source={require('../../assets/home/no_bg.png')} >
                                    <Text style={{color: '#fff',fontSize: 10,}}>执 {info.aqcNum}</Text>
                                </ImageBackground>:null
                                }
                            </View>
                        </View>
                        <View style={{width: 50,height: 70,alignItems: 'flex-start',display:'flex',justifyContent: 'flex-start'}}>
                            <Image source={require('../../assets/home/sign.png')} style={{width: 30,height: 30}} />
                        </View>
                    </ImageBackground>
                </View>
            </View>
        )
    }

    _renderMenu(){
        return (
            <View style={[styles.blockPanel,{backgroundColor: '#fff',height: 240,marginTop: 5}]}>
                <Swiper showsPagination={true}
                        style={{paddingBottom: 0}}
                        dot={<View style={{           //未选中的圆点样式
                            backgroundColor: '#E2E2E2',
                            width: 10,
                            height: 5,
                            borderRadius: 4,
                            marginLeft: 2,
                            marginRight: 2,
                            marginBottom: -30,
                        }}/>}
                        activeDot={<View style={{    //选中的圆点样式
                            backgroundColor: '#429FFF',
                            width: 20,
                            height: 5,
                            borderRadius: 4,
                            marginLeft: 2,
                            marginRight: 2,
                            marginBottom: -30,
                        }}/>}
                >
                    <View style={styles.menuPanel}>
                        <TouchableOpacity style={styles.menuItem} onPress={()=>this.gotoPage('CaseReport')}>
                            <Image source={require('../../assets/home/icon1.png')} style={styles.menuIcon} />
                            <Text style={styles.menuLabel}>巡查上报</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.menuItem}
                            onPress={()=>this.gotoPage('WaitList')}
                        >
                            <Image source={require('../../assets/home/icon5.png')} style={styles.menuIcon} />
                            <Text style={styles.menuLabel}>我的待办</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.menuItem}
                            onPress={()=>this.gotoPage('DoneList')}
                        >
                            <Image source={require('../../assets/home/icon3.png')} style={styles.menuIcon} />
                            <Text style={styles.menuLabel}>我的已办</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.menuItem}>
                            <Image source={require('../../assets/home/icon4.png')} style={styles.menuIcon} />
                            <Text style={styles.menuLabel}>指挥中心</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.menuItem}
                            onPress={()=>this.gotoPage('Regulations')}
                        >
                            <Image source={require('../../assets/home/icon6.png')} style={styles.menuIcon} />
                            <Text style={styles.menuLabel}>法规查询</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.menuItem}
                            onPress={()=>this.gotoPage('Individual')}
                        >
                            <Image source={require('../../assets/home/icon7.png')} style={styles.menuIcon} />
                            <Text style={styles.menuLabel}>个人监督</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.menuItem}
                            onPress={()=>this.gotoPage('Enterprise')}
                        >
                            <Image source={require('../../assets/home/icon8.png')} style={styles.menuIcon} />
                            <Text style={styles.menuLabel}>企业监督</Text>
                        </TouchableOpacity>

                        {/* <TouchableOpacity style={styles.menuItem}
                            onPress={()=>this.gotoPage('VideoDemo')}
                        >
                            <Image source={require('../../assets/home/icon8.png')} style={styles.menuIcon} />
                            <Text style={styles.menuLabel}>视屏测试</Text>
                        </TouchableOpacity> */}
                    </View>
                    <View style={styles.menuPanel}>
                        {/*<TouchableOpacity style={styles.menuItem}>*/}
                        {/*    <Image source={require('../../assets/home/icon9.png')} style={styles.menuIcon} />*/}
                        {/*    <Text style={styles.menuLabel}>证据登记</Text>*/}
                        {/*</TouchableOpacity>*/}
                        {/*<TouchableOpacity style={styles.menuItem}>*/}
                        {/*    <Image source={require('../../assets/home/icon10.png')} style={styles.menuIcon} />*/}
                        {/*    <Text style={styles.menuLabel}>物品登记</Text>*/}
                        {/*</TouchableOpacity>*/}
                        {/*<TouchableOpacity style={styles.menuItem}>*/}
                        {/*    <Image source={require('../../assets/home/icon11.png')} style={styles.menuIcon} />*/}
                        {/*    <Text style={styles.menuLabel}>案件参考</Text>*/}
                        {/*</TouchableOpacity>*/}
                        {/*<TouchableOpacity style={styles.menuItem}>*/}
                        {/*    <Image source={require('../../assets/home/icon2.png')} style={styles.menuIcon} />*/}
                        {/*    <Text style={styles.menuLabel}>投诉清单</Text>*/}
                        {/*</TouchableOpacity>*/}
                        {/*<View style={styles.menuItem}>*/}
                        {/*    <Image source={require('../../assets/home/icon1.png')} style={styles.menuIcon} />*/}
                        {/*    <Text style={styles.menuLabel}>待办清单</Text>*/}
                        {/*</View>*/}
                    </View>
                </Swiper>
            </View>
        )
    }

    _renderBanner(){
        return (
            <View style={styles.blockPanel}>
                <Image source={require('../../assets/home/banner.png')} style={styles.bannerImage}/>
            </View>
        )
    }


    _renderMsgItem(){
        return (
            <View style={{borderBottomWidth: 1,borderColor: '#E7E7E7',paddingBottom: 5,paddingTop: 5,height: 110}}>
                <View style={{display: 'flex',flexDirection: 'row',alignItems: 'center'}}>
                    <Image source={require('../../assets/home/list_icon.png')} style={{height: 20,width: 20}} />
                    <Text style={{flex: 1,paddingLeft: 5,fontSize: 16,color: '#323232'}}>专项行动百天的通知</Text>
                    <View style={{display: 'flex',alignItem:'center',flexDirection: 'row',}}>
                        <Text style={{backgroundColor: 'red',width: 6,height:6,borderRadius:5,marginTop: 6}}></Text>
                        <AntDesign name={'right'} size={20} color={'#B8B8B8'}/>
                    </View>
                </View>
                <View style={{paddingLeft: 25}}><Text style={{color: '#BBBBBB'}}>2020-04-12 15:30</Text></View>
                <View style={{paddingLeft: 25}}>
                    <Text style={{color:'#686868'}}>如何整治城市建设进入快车道，占道经营、违建违停等城市管理问题？</Text>
                </View>
            </View>
        )
    }

    _renderRuleItem(item){
        return (
            <View key={item.id} style={{borderBottomWidth: 1,borderColor: '#E7E7E7',paddingBottom: 5,paddingTop: 5}}>
                <View style={{display: 'flex',flexDirection: 'row',alignItems: 'center'}}>
                    {/*<Image source={require('../../assets/home/list_icon.png')} style={{height: 20,width: 20}} />*/}
                    <View style={{width: 10,height: 10,backgroundColor: '#4D70CB'}}></View>
                    <Text style={{flex: 1,paddingLeft: 5,fontSize: 16,color: '#323232'}}>{item.regimeName}</Text>
                    <View style={{display: 'flex',alignItem:'center',flexDirection: 'row',}}>
                        <AntDesign name={'right'} size={20} color={'#B8B8B8'}/>
                    </View>
                </View>
                <View style={{paddingLeft: 15}}><Text style={{color:'#686868'}}>{item.regimeType}</Text></View>
                <View style={{paddingLeft: 15}}><Text style={{color: '#BBBBBB'}}>{DateUtil.dateFormat(new Date(item.createTime))}</Text></View>

            </View>
        )
    }
    _renderRuleList(){
        const list = this.state.ruleList
        return (
            <View style={{padding: 10}}>

                {list.map(item=>{
                    return this._renderRuleItem(item)
                })}
                {list.length > 0?
                    (
                        <TouchableOpacity>
                            <View style={{padding: 10,}}><Text style={{color: '#666',textAlign: 'center'}}>加载更多</Text></View>
                        </TouchableOpacity>
                    ): <Text style={{textAlign:'center'}}>暂无相关数据</Text>
                }

            </View>
        )
    }
    _renderCaseList(){
        return (
            <View style={{padding: 10}}>
                {this._renderMsgItem()}
                {this._renderMsgItem()}
                {this._renderMsgItem()}
                {this._renderMsgItem()}
                <TouchableOpacity>
                    <View style={{padding: 10,}}><Text style={{color: '#666',textAlign: 'center'}}>加载更多</Text></View>
                </TouchableOpacity>
            </View>
        )
    }


    handleTabChange(tab, index){
        if (this.state.index !== index) {
            this.state.tabIndex = index;
            this.loadData();
        }
    }
    _renderTabs(){
        return (
            <View style={[{height: 490,marginBottom: 10},styles.blockPanel]}>
                <Tabs
                    style={{backgroundColor: 'white',}}
                    tabBarTextStyle={GlobalStyles.tabsTextStyle}
                    tabBarUnderlineStyle={GlobalStyles.tabsLineStyle}
                    tabBarActiveTextColor={GlobalStyles.tabBarActiveTextColor}
                    tabBarInactiveTextColor={GlobalStyles.tabBarInactiveTextColor}
                    onChange={(tab, index) => this.handleTabChange(tab, index)}
                    tabs={[
                        {title: '待办案件'},
                        {title: '公告通知'},
                        {title: '规则制度'},
                    ]}>
                    <View tabLabel="待办案件">
                        {this._renderCaseList()}
                    </View>
                    <View tabLabel="公告通知">
                        <Text>公告通知</Text>
                    </View>
                    <View tabLabel="规则制度">
                        {this._renderRuleList()}
                    </View>
                </Tabs>
            </View>
        )
    }

    render() {
        return (
            <SafeAreaViewPlus>
                <View style={styles.headerPanel}>
                    <StatusBar backgroundColor="#ff0000"
                               translucent={true}
                               hidden={true}
                               animated={true}/>
                    <ImageBackground style={styles.topBgImage} source={require('../../assets/home/top_bg.png')} >
                        {this._renderUserInfo()}
                    </ImageBackground>
                </View>
                <ScrollView showsVerticalScrollIndicator={false}>
                    {this._renderMenu()}
                    {this._renderBanner()}
                    {this._renderTabs()}

                </ScrollView>
            </SafeAreaViewPlus>
        );
    }
}
export default Home;
